<template>
  <div class="joe_main">
    <div class="joe_wallpaper__type">
      <div class="joe_wallpaper__type-title">壁纸分类</div>
      <ul class="joe_wallpaper__type-list">
        <template v-for="item in wallpaperTypeList">
          <li class="item animated swing" :class="current === item.id ?'active' : ''"
              @click="selectWallpaperType(item.id)"
          >
            {{ item.name }}
          </li>
        </template>

      </ul>
    </div>
    <div
      v-viewer
      ref="viewer"
      class="my-waterfall"
    >
      <template v-for="item in dataSource">
        <photo-card :img="item.url" link=""></photo-card>
      </template>
    </div>
    <ul class="joe_wallpaper__pagination">
      <a-pagination
        :pageSizeOptions="pagination.pageSizeOptions"
        show-size-changer
        :default-current="1"
        :page-size.sync="pagination.pageSize"
        :total="pagination.total"
        @change="onChange"
        :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
      />
    </ul>
  </div>
</template>

<script>
import AntsImageUpload from '@/components/ants/AntsImageUpload'
import {getAction, getFileAccessHttpUrl, deleteAction} from '@/api/manage'
import {filterObj} from '@/utils/util'
import photoCard from '@/components/ants/AntsPhotoCard'

export default {
  name: 'Wallpaper',
  components: {
    AntsImageUpload,
    photoCard
  },
  data() {
    return {
      url: {
        list: '/wallpaper/listAll',
        getWallpaperType: '/articleView/getWallpaperType'
      },
      disabled: true,
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 15,
        pageSizeOptions: ['50', '100', '150'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      /* 数据源 */
      dataSource: [],
      wallpaperTypeList: [],
      current: ''
    }
  },
  created() {
    this.getWallpaperType()

  },
  mounted() {
  },
  methods: {
    show() {
      // 直接显示图片
      const viewer = this.$refs['viewer'].$viewer
      viewer.show()
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.pagination.current = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.disabled = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.data
          this.pagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.disabled = false
      })
    },
    getWallpaperType() {
      getAction(this.url.getWallpaperType, {}).then((res) => {
        if (res.success) {
          this.current = res.result[0].id
          this.wallpaperTypeList = res.result
          this.loadData()
        }
      })
    },
    getQueryParams() {
      const param = {}
      // 获取查询条件
      param.pageNo = this.pagination.current
      param.pageSize = this.pagination.pageSize
      param.fileType = this.current
      return filterObj(param)
    },
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.current = current
      this.pagination.pageSize = pageSize
      this.loadData()
    },
    onChange(pageNumber) {
      this.pagination.current = pageNumber
      this.loadData()
    },
    selectWallpaperType(value) {
      this.current = value
      this.loadData()
    }
  }
}


</script>


<style scoped>
.my-waterfall {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

</style>
